<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div v-show="showDetail">
    <el-dialog v-model="props.viewDialogVisible" :title="title" width="800" @close="handleVisible('cancel')">
      <el-card shadow="never">
        <el-descriptions label-width="100px" class="pipe-descriptions">
          <el-descriptions-item label="服务名称：">{{ props.rowData.serverName }}</el-descriptions-item>
          <el-descriptions-item label="模型&版本：">{{ props.rowData.modelName }}/{{ props.rowData.modelVersion }}</el-descriptions-item>
          <el-descriptions-item label="要素库：" :span="2">{{ props.rowData.databaseTypeName }} </el-descriptions-item>
          <el-descriptions-item label="业务场景：">{{ props.rowData.sceneName }}</el-descriptions-item>
          <el-descriptions-item label="业务系统：" :span="1">{{ props.rowData.systemName }} </el-descriptions-item>
          <el-descriptions-item label="描述：" :span="3">{{ props.rowData.description }} </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card v-if="props.operateType === 'viewServiceAddress'" style="margin-top: 10px" shadow="never">
        <el-descriptions :title="'服务地址'" class="pipe-descriptions">
          <el-descriptions-item>{{ props.rowData.serviceAddress }}</el-descriptions-item>
        </el-descriptions>
        <el-button size="small" type="primary" link @click="handleVisible('copyServiceAddress')">点击复制</el-button>
        <el-button v-if="props.rowData.serverType === 1" size="small" type="primary" link @click="handleVisible('download')">数据模板下载</el-button>
      </el-card>
      <el-card v-else style="margin-top: 10px" shadow="never">
        <el-descriptions label-width="100px" class="pipe-descriptions">
          <el-descriptions-item label="服务调用次数：" :span="1">{{ props.rowData.serviceTimes }}</el-descriptions-item>
          <el-descriptions-item label="服务用户：" :span="2">{{ props.rowData.createBy }}</el-descriptions-item>
          <el-descriptions-item label="服务地址：" :span="3">{{ props.rowData.serviceAddress }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="serviceData" style="width: 100%">
          <el-table-column prop="updateTime" align="center" label="调用时间" width="280"></el-table-column>
          <el-table-column prop="dataCount" align="center" label="数据量" width="100"></el-table-column>
          <el-table-column prop="updateBy" align="center" label="用户" width="100"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" type="text" @click="handleVisible('view', scope.row)">查看数据</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" type="primary" plain @click="handleVisible('cancel')">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { dataServicesHistoryList } from '@/api/dataServices/index.ts';
import { getModelTemplateByModelId } from '@/api/dataAcquisition';
import { downloadFile } from '@/utils/index';
const props = defineProps(['viewDialogVisible', 'operateType', 'rowData', 'showDetail']);
const emits = defineEmits(['handleEvent', 'buttonClick']);
const title = ref('');
const row = ref({});
const serviceData = ref([]);
watch(
  () => props.operateType,
  (newVal) => {
    if (newVal === 'viewServiceAddress') {
      title.value = '服务地址';
    } else {
      title.value = '服务详情';
    }
  },
  { immediate: true }
);
const handleVisible = (type, data) => {
  if (type === 'cancel') {
    emits('handleEvent', { type: 'view' });
  }
  if (type === 'copyServiceAddress') {
    copyToClipboard(props.rowData.serviceAddress);
  }
  if (type === 'download') {
    console.log('props.rowData.modelId', props.rowData.modelId);
    getModelTemplateByModelId({ modelId: props.rowData.modelId }).then((res) => {
      downloadFile(res, `数据导入模板`, 'zip');
    });
  }
  if (type === 'view') {
    row.value = {
      pageNum: 0,
      pageSize: 99999999,
      orderByColumn: '',
      isAsc: '',
      id: data.id,
      firstNum: 0
    };
    console.log('row.value', row.value);
    emits('handleEvent', { type: 'viewHistoryData', params: row.value });
  }
};
const copyToClipboard = (text) => {
  if (!navigator.clipboard) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    ElMessage.success('复制成功');
    return;
  }

  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success('复制成功');
    })
    .catch((err) => {
      console.error('无法复制文本: ', err);
      ElMessage.error('复制失败');
    });
};

onMounted(() => {
  if (props.operateType === 'view') {
    const params = {
      pageNum: 1,
      pageSize: 10,
      orderByColumn: '',
      isAsc: '',
      id: props.rowData.id || '',
      firstNum: 0
    };
    dataServicesHistoryList(params).then((res) => {
      if (res.code === 200) {
        serviceData.value = res.data.record;
      }
    });
  }
});
</script>

<style lang="scss" scoped>
.pipe-descriptions {
  :deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
    word-break: break-all;
    word-wrap: break-word;
  }
}
.location-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 增加间隔 */
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.el-dialog__header {
  font-weight: bold;
}
</style>
